<template>
  <div class="app-container">
    <!-- 法院组织结构树标题 -->
    <h1 class="title">湖南省高级人民法院组织结构树</h1>
    <!-- 树形组件的容器 -->
    <tree-node :node="treeData" @delete-node="deleteNode" @edit-node="editNode" />
  </div>
</template>

<script>
import TreeNode from './TreeNode.vue';

export default {
  name: 'App',
  components: {
    TreeNode,
  },
  data() {
    return {
      treeData: {
        id: 1,
        position: '院长',
        name: '张三',
        children: [
          {
            id: 2,
            position: '副院长1',
            name: '李四',
            children: [
              {
                id: 3,
                position: '民事一庭庭长',
                name: '王五',
                children: [
                  {
                    id: 4,
                    position: '副庭长',
                    name: '赵六',
                    children: [],
                  }
                ],
              },
              {
                id: 6,
                position: '民事二庭庭长',
                name: '周八',
                children: [
                  {
                    id: 5,
                    position: '副庭长1',
                    name: '孙七',
                    children: [],
                  },
                  {
                    id: 5,
                    position: '副庭长2',
                    name: '曾亮',
                    children: [],
                  }
                ],
              },
              {
                id: 7,
                position: '行政一庭庭长',
                name: '吴九',
                children: [],
              },
            ],
          },
          {
            id: 8,
            position: '副院长2',
            name: '陈十',
            children: [
              {
                id: 9,
                position: '刑事一庭庭长',
                name: '钱十一',
                children: [],
              },
              {
                id: 10,
                position: '刑事二庭庭长',
                name: '郑十二',
                children: [{
                  id: 5,
                  position: '副庭长',
                  name: '李立',
                  children: [],
                },],
              },
              {
                id: 11,
                position: '行政二庭庭长',
                name: '王十三',
                children: [],
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    deleteNode(parentNode, nodeIndex) {
      parentNode.children.splice(nodeIndex, 1);
    },
    editNode(node) {
      console.log('Node edited:', node);
    },
  },
};
</script>

<style scoped>
/* 标题样式 */
.title {
  font-size: 32px;
  font-weight: bold;
  color: #0074d9;
  text-align: center;
  margin-bottom: 20px;
  padding: 10px;
  border-bottom: 2px solid #0056a3;
  letter-spacing: 2px;
}

/* 主容器 */
.app-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}
</style>
